
<template>
    <div id="container" class="item-wrapper px-4 relative  bg-slate-50
">
        <div
            class="item  space-y-2 mb-1 mx-1 float-left w-40 bg-white "
            v-for="item in items"
            :key="item.name" 
        >
            <div class="item-image ">
                <img :src="item.cover" class="rounded  w-40 " />
            </div>
            <div class="item-info m-1">
                <div class="item-name text-xs font-bold">{{ item.name }}</div>
                <div class="item-price text-xs font-bold">{{ getCurrency(item.price) }}</div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import type { ViewItem } from '../types/home';
// 工具函数库
import { getCurrency } from '../utils/utils'
// import '../utils/WatfulFull'
// ts 里比js复杂
// 数据 
import waterFallLayout from '../utils/WatfulFull'; // 引入方法
interface Props {
    items: ViewItem[]
}
defineProps<Props>()
//  ---------------------------------------------------------------------
onMounted( () => {
  waterFallLayout('container', 'item');
});

</script>
<style scoped>
/* 只对最后一个 .item 的 .item-info 应用 pb-16 */
.item:last-child .item-info {
  padding-bottom: 4rem;
}
</style>